// 第一个柱状图的js开始
    $(function () {
        $('#container1').highcharts({
            chart: {
                type: 'column'
            },
            title: {
                text: '用户分布统计表'
            },
            subtitle: {
                text: ''
            },
            xAxis: {
                categories: [               //X轴的统计项
                    '浒井社区',
                    '孙厝社区',
                    '凤林美社区',
                    '叶厝社区',
                    '兑山社区',
                    '东安社区',
                    '乐海社区',
                    '滨水社区'
                ]
            },
            yAxis: {
                min: 0,
                title: {
                    text: '人数(人)'           //Y轴的计量单位
                }
            },
            tooltip: {
                headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                    '<td style="padding:0"><b>{point.y} 人</b></td></tr>',       //鼠标悬浮时显示的内容
                footerFormat: '</table>',
                shared: true,
                useHTML: true
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,                          //柱的宽度设置
                    borderWidth: 0
                }
            },
            series: [{
                name: '用户人数',
                data: [42, 33, 34, 39, 52, 75, 57, 60]            //图表的数据

            }]
        });
    });

// <!-- 第一个柱状图js结束 -->

// <!-- 第二个饼状图js开始 -->

    $(function () {
        $('#container2').highcharts({
            chart: {
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false
            },
            title: {
                text: '用户分布统计表'             //表头
            },
            tooltip: {
                pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'        //鼠标悬浮时显示的百分比格式
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: true,
                        color: '#000000',
                        connectorColor: '#000000',
                        format: '<b>{point.name}</b>: {point.percentage:.1f} %'     //鼠标悬浮时显示的百分比格式
                    }
                }
            },

            series: [{
                type: 'pie',
                name: '人数占比',                                                   //悬浮时候显示的提示内容
                data: [
                    ['浒井社区',   45.0],                                           //图表的数据
                    ['孙厝社区',       26.8],
                    ['凤林美社区',       12.8],
                    ['叶厝社区',    8.5],
                    ['兑山社区',     6.2],
                    ['东安社区',   11.7],
                    ['乐海社区',   12.7],
                    ['滨水社区',   15.7],
                ]
            }]
        });
    });

// <!-- 第二个饼状图js结束 -->

// <!-- 第三个折线图js开始 -->
    $(function () {
        $('#container3').highcharts({
            title: {
                text: '用户分布统计表',        //表头
                x: -20 //center
            },
            subtitle: {
                text: '',
                x: -20
            },
            xAxis: {
                categories: ['浒井社区', '孙厝社区', '凤林美社区', '叶厝社区', '兑山社区', '东安社区','乐海社区', '滨水社区']                //X轴的统计项
            },
            yAxis: {
                title: {
                    text: '人数(人)'           //Y轴的计量单位
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            tooltip: {
                valueSuffix: '人'                //鼠标悬浮时候显示的数据的计量单位
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'middle',
                borderWidth: 0
            },
            series: [{
                name: '用户人数',
                data: [12, 6, 65, 14, 33, 21, 25, 100]  //Y轴数据，从前到后依次为X轴的各个项目
            }]
        });
    });
